<template>
	<view class="detail">
		<view class="top">
			<view class="price fs_30 fw_600">
				{{option.price}}
			</view>
			<view class="rate_box">
				<view class="text">已售出{{option.rate}}%</view>
				<view class="outer">
					<span class="inner span" :style="{width:option.rate+'%'}"></span>
				</view>
			</view>
		</view>
		<view class="content_img">
			<!-- 第一个拼团商品 -->
			<image v-if="option.index==0" mode="widthFix" :src="img_1" alt="">
			<!-- 第二个拼团商品 -->
			<image v-if="option.index==1" mode="widthFix" :src="img_2" alt="">
			<!-- 第三个拼团商品 -->
			<image v-if="option.index==2" mode="widthFix" :src="img_3" alt="">
			<image src="https://oss-shop.cciinet.com/files/MiniProgram/disclaimers.png" mode="widthFix"></image>
		</view>
		<view class="btn">
			<!-- #ifdef !APP-PLUS && !H5 -->
			<button id="shareBtn" class="btn_item" open-type="share">
				<i class="share"></i>
				<span class="span">分享</span>
			</button>
			<button open-type="contact" class="btn_item">
				<i class="index"></i>
				<span class="span">客服</span>
			</button>
			 <!-- #endif -->
			 <!-- #ifdef H5 -->
			 <button id="shareBtn" class="btn_item" @click="showShare=true">
			 	<i class="share"></i>
			 	<span class="span">分享</span>
			 </button>
			 <button class="btn_item" @click="handleChat">
			 	<i class="index"></i>
			 	<span class="span">客服</span>
			 </button>
			  <!-- #endif -->
			<view class="pintuan" @click="handleSave(1)">
				提交意向
			</view>
		</view>
		<view class="circle_bf" v-if="!userId" @touchmove.stop="" @click="$handleOpenUrl('/pages/login/index')">
			<view class="con1">
				查看全部
			</view>
		</view>
		<!-- #ifdef H5 -->
		<h5_share ref="setOpt" :showShare="showShare" @changeShow="changeShow"></h5_share>
		<!-- #endif -->
	</view>
</template>
<script>
	import h5_share from "@/components/h5_share.vue"
	import {
		saveGroupRecord
	} from "@/api/home/index.js";
	export default {
		components: {
			h5_share
		},
		data() {
			return {
				shareStu: false,
				img_1: "https://prod-shop-images.oss-cn-beijing.aliyuncs.com/images/common/group_product_01.png?t=" + Date.now(),
				img_2: "https://prod-shop-images.oss-cn-beijing.aliyuncs.com/images/common/group_product_02.png?t=" + Date.now(),
				img_3: "https://prod-shop-images.oss-cn-beijing.aliyuncs.com/images/common/group_product_03.png?t=" + Date.now(),
				option: "",
				userId: "",
				showShare: false,
			};
		},
		onLoad(option) {
			let data = option
			data.pName = decodeURIComponent(data.pName)
			data.price = decodeURIComponent(data.price)
			console.log(data)
			this.option = data
			this.userId = uni.getStorageSync('userId')
		},
		mounted() {
			// #ifdef H5
			this.$refs.setOpt.setShareOpt({
				title: this.option.pName+'正在拼团中，快来围观！',
				desc: '冻品人专享！花少钱，拼好货！',
				img: this.option.url
			})
			// #endif
		},
		methods: {
			changeShow() {
				this.showShare = false
			},
			handleChat() {
				window._MICHAT.floatClick();
				return false;
			},
			async handleSave(type) {
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				if (!uni.getStorageSync("userId")) {
					this.$handleOpenUrl("/pages/login/index")
				} else {
					let res = await saveGroupRecord({
						mobile: userInfo.user.mobile,
						userId: userInfo.user.id,
						productName: this.option.pName,
						type,
					})
					if (res.code == 2) {
						uni.showToast({
							title: '请勿重复提交采购意向。',
							icon: "none"
						})
						setTimeout(() => {
							this.$handleOpenUrl("/pages/home/index", 0)
						}, 2000)
						return;
					}
					if (res.code == 0) {
						uni.showToast({
							title: '信息提交成功，稍后会有专人与您联系。',
							icon: "none"
						})
						setTimeout(() => {
							this.$handleOpenUrl("/pages/home/index", 0)
						}, 2000)
					} 
				}
			},
		},
	};
</script>
<style scoped lang="scss">
	.detail {
		// width: 100%;
		min-height: 100%;
		background: #f7f9fe;
		padding-bottom: 100upx;

		.circle_bf {
			width: 100%;
			height: 100%;
			background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
			;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;

			.con1 {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				color: #EA5520;
				bottom: 180upx;
				font-size: 36upx;
			}
		}

		.top {
			position: fixed;
			top: 0upx;
			right: 0;
			height: 72upx;
			width: 100%;
			display: flex;
			align-items: center;
			z-index: 999;
			.price {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 243upx;
				height: 100%;
				color: #FDF6F2;
				background: #EA5520;
			}

			.rate_box {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				background: #FCEADE;

				.text {
					color: #EA5520;
					margin-top: -5upx;
				}

				.outer {
					position: relative;
					width: 270upx;
					height: 18upx;
					text-align: center;
					border-radius: 18upx;
					margin-left: 20upx;
					background: #CCCCCC;

					.inner {
						position: absolute;
						top: 0;
						left: 0;
						height: 100%;
						border-radius: 24upx;
						background: #E8481D;
					}
				}
			}
		}

		.content_img {
			padding: 100upx 20upx 20upx;

			image {
				width: 100%;
			}
		}

		.btn {
			width: 100%;
			position: fixed;
			bottom: 0;
			height: 98upx;
			background: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btn_item {
				display: flex;
				width: 161upx;
				height: 65upx;
				background: #ffffff;
				border: 2upx solid #eeeeee;
				border-radius: 32upx;
				align-items: center;
				justify-content: center;
				margin-right: 10upx;
				margin-left: 32upx;
				font-size: 32upx;

				.index {
					display: inline-block;
					width: 37upx;
					height: 33upx;
					background: url("https://oss-shop.cciinet.com/files/MiniProgram/service_icon.png") no-repeat;
					background-size: 100% 100%;
				}

				.span {
					font-size: 32upx;
					color: #666666;
					padding-left: 13upx;
				}

				.share {
					display: inline-block;
					width: 30upx;
					height: 30upx;
					background: url("https://oss-shop.cciinet.com/files/MiniProgram/share1.svg") no-repeat;
					background-size: 100% 100%;
				}
			}

			.pintuan {
				 // #ifdef APP-PLUS
				margin-left: 32upx;
				// #endif 
				margin-right: 32upx;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				height: 64upx;
				color: #fff;
				font-size: 32upx;
				background: linear-gradient(86deg, #F83600, #FACC22);
				border-radius: 32upx;
			}

		}
	}
</style>
